<template>
<div class="right-last-use full-height relative-position">
  <!--  头部-->
  <div class="recycle-head row no-wrap bg-primary text-white">
  </div>
  <q-table class="table-file" :pagination="pagination" no-data-label="暂无数据"
           :data="files" :columns="columns" row-key="id" hide-bottom
           binary-state-sort @request="onRequest">
    <template v-slot:body="props">
      <file-item-tr :file="props" :is-active="isActDay(props.row)" :ref="'fileItemTr'+props.row.id"
                    @setFile="setFile"
                    @setNewNameFun="setNewNameFun" @deleteFun="deleteFun"
                    @addCompareList="addCompareList" @setDragItem="setDragItem"
                    @editFile="editFile" @showVersionList="showVersionList"
      />
    </template>
  </q-table>
  <!--  文件内容编辑-->
  <code-edit ref="codeEdit" :value="editFileContent" :name="editFileName" :decode="edtiFileDecode"
             :path="editFilePath" :state="codeState" @refreshList="getInfo" @save="saveFile" />
  <!--  文件对比列表-->
  <compare-file ref="CompareFile"
                :client="client" :requestId="requestId"
                :drag-item="dragItem" :stat-pos="statPos" @compare="compareDetail" />
  <!--  版本履历-->
  <version-list ref="versionList"></version-list>
  <!--  文件内容对比查看-->
  <code-merge ref="codeMerge"></code-merge>
</div>
</template>

<script>
import FileItemTr from './file-item-tr'
import CodeEdit from 'src/components/code-edit/index'
import CompareFile from './compare-file1'
import VersionList from './version-list'
import CodeMerge from 'src/components/code-merge'
import { getFiletype } from 'src/assets/js/util'
import { editFile, setNewName,
  rmDir } from 'src/boot/program-v2/cloud'
import { getLastUseList, rmFileToRecyclebin } from 'src/boot/program-v2/G-gov'
import { mapGetters } from 'vuex'
import fileMqttMixin from 'src/assets/js/webSocket'
import fileMinxins from './file-minxins'
export default {
  name: 'right-last-use',
  mixins: [fileMqttMixin, fileMinxins],
  data () {
    return {
      columns: [ // 列表的头部
        { name: 'label', align: 'left', label: '文件名', field: 'label', style: 'width: 60%' },
        { name: 'size', align: 'left', label: '大小', field: 'size' },
        { name: 'timestamp', label: '修改时间', field: 'timestamp', sortable: true }
      ],
      pagination: {
        sortBy: '',
        descending: false,
        page: 1,
        rowsPerPage: 0,
        rowsNumber: 10
      },
      files: [], // 列表数据
      loading: false, // 加载状态
      actFile: [], // 选中的文件
      // 编辑内容
      editCurFile: null, // 存储要编辑的文件数据
      editFileContent: '', // 要编辑文件的内容
      editFileName: '', // 要编辑文件的名字
      edtiFileDecode: '', // 要编辑文件的编码
      editFilePath: '', // 要编辑文件的路径
      codeState: 'edit', // 添加编辑状态，edit or add
      // 拖动
      dragItem: [], // 存储拖动的数据
      // 文件对比
      compareList: [], // 文件对比数据
      statPos: 'localCloud' // 定义埋点位置
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      this.loading = true
      getLastUseList().then((res) => {
        this.files = this.initInfo(res.data, true)
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 给数据添加必要的属性
     * @param info
     * @param isFile 是否是文件
     * @returns 新数据
     */
    initInfo (info, isFile, dirLength = 0) {
      return info.map((item, index) => {
        let type = isFile ? getFiletype(item.label) : 'other'
        return {
          ...item,
          _name: item.label,
          isFile: isFile,
          type,
          source: 'cloud',
          icon: isFile ? 'img:statics/svg/' + type + '.svg' : 'img:statics/svg/file-icon.svg',
          children: []
        }
      })
    },
    // 排序
    onRequest (props) {
      const { sortBy, descending } = props.pagination
      if (sortBy) {
        const sortFn = (descending
          ? (a, b) => (a[sortBy] > b[sortBy] ? -1 : a[sortBy] < b[sortBy] ? 1 : 0)
          : (a, b) => (a[sortBy] > b[sortBy] ? 1 : a[sortBy] < b[sortBy] ? -1 : 0)
        )
        this.files = this.files.sort(sortFn)
        this.pagination.sortBy = sortBy
        this.pagination.descending = descending
      }
    },
    // 是否是选中状态
    isActDay (file) {
      const index = this.actFile.findIndex(item => {
        return item.id === file.id
      })
      return index > -1
    },
    // 选中一个文件
    setFile (item) {
      this.actFile = [item]
    },
    // 重命名文件夹、文件
    setNewNameFun (item, rename) {
      let path = item.isFile ? item.path : item.path.slice(0, item.path.length - 1)
      const params = {
        newKey: rename,
        oldKey: path
      }
      let ref = (this.lookStatus === 'bigIcon' ? 'fileItem' : 'fileItemTr') + item.id
      setNewName(params).then(res => {
        if (this.$refs[ref].edit) {
          this.$refs[ref].edit = false
        } else {
          this.$refs[ref][0].edit = false
        }
        this.getInfo()
      }).catch(() => {
        if (this.$refs[ref].rename) {
          this.$refs[ref].rename = item.label
        } else {
          this.$refs[ref][0].rename = item.label
        }
      })
    },
    // 删除文件和文件夹
    deleteFun (item) {
      this.$q.dialog({
        title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-28" ></i> 确定要删除${item.label}吗？</p>`,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      }).onOk(data => {
        if (item.isFile) {
          let params = {
            key: item.path,
            size: item.size
          }
          rmFileToRecyclebin(params).then(res => {
            this.getInfo()
          })
        } else {
          let path = item.path
          rmDir(path).then(res => {
            this.getInfo()
          })
        }
      })
    },

    // 编辑保存文件
    saveFile (fileName, code) {
      const params = {
        key: fileName,
        content: code
      }
      editFile(params).then(res => {
        this.successMessage(`修改文件${this.editFileName}成功`)
        this.getInfo()
        this.$refs.codeEdit.hideDialog()
      })
    }
  },
  components: {
    FileItemTr,
    CodeEdit,
    CompareFile,
    VersionList,
    CodeMerge
  }
}
</script>

<style scoped lang="stylus">
.right-last-use{
  .recycle-head{
    padding 0 20px
    height 40px
    line-height 40px
    /*font-size 14px*/
    align-items center
    font-size 12px
    .icon{
      margin-left 10px
      font-size 18px
    }
  }
}
</style>
<style lang="stylus">
.right-last-use .table-file{
  height 100%
  .q-table__middle{
    height calc(100% - 40px)
  }
}
</style>
